<%--
  Created by IntelliJ IDEA.
  User: KangFaWei
  Date: 2019/6/22
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<jsp:include page="/web/inc/header"/>
<section>
    <div class="wrap">
        <div id="seach">
            <div id="logo" class="qanda"><a href="http://fenlicx.qinglab.cn" title="再搜索垃圾分类问答">再搜索垃圾分类问答</a></div>
            <form id="my-form" action="<%=path%>/web/question/searchList" method="post">
                <div class="qanda">
                    <input type="text" required id="keyword" name="keyword" class="seach_txt" aria-label="输入搜索问题" placeholder="输入搜索问题">
                    <input type="button" class="seach_bun" id="search-question" value="搜问题">
                    <a class="seach_bun" href="<%=path%>/web/question/add">提问题</a>
                </div>
            </form>
        </div>
        <nav class="qanda">
            <dl class="off">
                <dt><h3>垃圾类型</h3></dt>
                <dd>
                    <c:forEach items="${requestScope.garbageTypes}" var="garbageType">
                        <a class="garbage-type" data-id="${garbageType.id}" href="javascript:void(0);">${garbageType.title}</a>
                    </c:forEach>
                </dd>
            </dl>
            <dl class="off">
                <dt><h3>材质</h3></dt>
                <dd>
                    <c:forEach items="${requestScope.textures}" var="texture">
                        <a class="texture" data-id="${texture.id}" href="javascript:void(0);">${texture.title}</a>
                    </c:forEach>
                </dd>
            </dl>
            <div id="show-next-texture">

            </div>
        </nav>
        <article class="article">
            <div class="title">
                <h1>分类名问答</h1>
                <a style="color:#FF0000" id="reset" href="javascript:void(0);">重置搜索</a>
                <%--<a href="javascript:void(0);">未完成问答</a>--%>
                <%--<a href="#">智能排序？</a>--%>
            </div>
            <div id="list-question">

            </div>
        </article>
    </div>
</section>

<script>
    $(function () {
        //打开页面默认
        questionList(1,null,null);

        $("#reset").click(function () {
            $(".garbage-type").attr("id","");
            $(".texture").attr("id","");
            $(".garbage-type").css("color","black");
            $(".texture").css("color","black");
            $("#show-next-texture").empty();

            questionList(1,null,null);

        })
        $("#search-question").click(function () {
            var keyword = $("#keyword").val();

            if (keyword.trim().length!=0)
            {
                $("#my-form").submit();
            }
        })
        //点击分类改变
        $(".garbage-type").click(function () {
            //将id跟css回复默认值
            $(".garbage-type").css("color","black");
            $(".garbage-type").attr("id","");

            //修改css跟id
            $(this).css("color","red");
            $(this).attr("id","cur");

            //获取分类以及材质的id
            var garbageTypeId = $(this).data("id");
            var textureId = $(".next-texture[id=cur]").data("id");

            questionList(1,garbageTypeId,textureId);
        })

        //点击材质切换
        $(".texture").click(function () {
            $("#show-next-texture").empty();
            //将id跟css回复默认值
            $(".texture").css("color","black");
            $(".texture").attr("id","");

            //修改css跟id
            $(this).css("color","red");
            $(this).attr("id","cur");

            var garbageTypeId=$(".garbage-type[id=cur]").data("id");
            var textureId=$(this).data("id");
            $.post("<%=path%>/web/question/nextTextureDataAsList",
                {textureId:textureId},
                function (mes) {
                    $("#show-next-texture").html(mes);
                }
            )

             questionList(1,garbageTypeId,textureId);

        })

        $("#show-next-texture").on("click",".next-texture",function () {
            //将id跟css回复默认值
            $(".next-texture").css("color","black");
            $(".next-texture").attr("id","");

            //修改css跟id
            $(this).css("color","red");
            $(this).attr("id","cur");

            var garbageTypeId=$(".garbage-type[id=cur]").data("id");
            var textureId=$(this).data("id");

            // alert(garbageTypeId+":"+textureId);
            questionList(1,garbageTypeId,textureId);

        })

        $("#list-question").on("click",".show-page",function () {
            var pageNum=$(this).html();
            var garbageTypeId=$(".garbage-type[id=cur]").data("id");
            var textureId=$(".texture[id=cur]").data("id");

            questionList(pageNum,garbageTypeId,textureId);
        })

        function questionList(pageNum,garbageTypeId,textureId){
            $.ajax({
                url:"<%=path%>/web/question/listData",
                data:{pageNum:pageNum,garbageTypeId:garbageTypeId,textureId:textureId},
                success:function(mes){
                    $("#list-question").empty();
                    $("#list-question").append(mes);
                }
            })
        }
    })
</script>

<jsp:include page="/web/inc/footer"/>
